<template>
  <div>
    <el-dialog :title="title" :visible="visible" width="60%" :modal="false" top="200px" custom-class="customerDialogClass"
      :before-close="dialogVisible" @opened="opens">

      <div class="formList" style="margin-bottom:10px">
        <el-form :inline="true">
          <el-form-item>
            <el-cascader size="large" :options="ops" v-model="selectedOp" @change="handleChange">
            </el-cascader>
          </el-form-item>
          <el-form-item>
            <el-button size="medium" @click="button">查询</el-button>
          </el-form-item>
        </el-form>
      </div>

      <div>
        <div id="row1">
          <dv-border-box-9 style="width: 49%; float: left; overflow: hidden ">
            <div ref="chart1" style="height:320px"></div>
          </dv-border-box-9>

          <dv-border-box-9 style="width: 49%; float: right; overflow: hidden">
            <div ref="chart2" style="height:320px"></div>
          </dv-border-box-9>
        </div>

        <div id="row2" style="margin-top:10px">
          <dv-border-box-9 style="width: 49%; float: left; overflow: hidden; margin-top:20px">
            <div ref="chart3" style="height:320px"></div>
          </dv-border-box-9>

          <dv-border-box-9 style="width: 49%; float: right; overflow: hidden; margin-top:20px">
            <div ref="chart4" style="height:320px"></div>
          </dv-border-box-9>
        </div>

      </div>

    </el-dialog>
  </div>
</template>

<script>
import * as echarts from "echarts";
import "echarts-gl";
import { provinceAndCityData } from 'element-china-area-data'
var mychart1;
var mychart2;
var mychart3;
var mychart4;
//z柱状图数据
var dataArr={
  xdata: ['2020/4','2020/8','2020/12','2021/4','2021/8','2021/12','2022/4'],
  vaccination: [1000,1300,1200,800,600,700,900],
  unvaccinated: [700,800,900,500,300,400,500],
  unvaccinatedTwo: [400,300,500,200,100,100,300],
  rateDataOne: [98,96,97,92,94,95,100],
  rateDataTwo: [88,86,87,82,84,85,95],
}

//天气chart数据
var weatherdata=[
  { value: 38,name: '温度' },
  { value: 69,name: '污染值' },
  { value: 59,name: '湿度' },
]

export default {

  data() {
    return {

      //级联选择器
      ops: provinceAndCityData,
      selectedOp: [],

      // 柱状图
      option3: {
        // tooltip
        tooltip: {
          trigger: "axis",
          textStyle: { fontSize: '100%' },
          formatter: params => {
            let rander=params.map(item => item.seriesType!=="pictorialBar"? `<div>${item.seriesName}: ${item.seriesType!=="line"? item.value:item.value+"%"}</div>`:'').join('')
            return `
                <div>${params[0].axisValue}</div>
                ${rander}
            `
          }
        },
        legend: {
          data: ['中餐馆','热门小馆','高档酒店','游客好评率','游客复游率'],
          textStyle: { fontSize: 14,color: '#fff' },
          itemWidth: 25,
          itemHeight: 15,
          itemGap: 15,
          bottom: '5%',
          selectedMode: false
        },
        xAxis: {
          axisTick: { show: true },
          axisLine: { lineStyle: { color: 'rgba(255,255,255, .2)' } },
          axisLabel: { textStyle: { fontSize: 12,color: '#fff' },},
          data: dataArr.xdata
        },

        // yAxis
        yAxis: [{
          axisTick: { show: false },
          axisLine: { show: false,},
          splitLine: { lineStyle: { color: 'rgba(255,255,255, .05)' } },
          axisLabel: { textStyle: { fontSize: 16,color: '#fff' } }
        },{
          show: true,
          max: 100,
          splitLine: { show: false },
          axisLine: { show: false },
          axisTick: { show: false },
          axisLabel: {
            textStyle: { fontSize: 16,color: '#fff' },
            formatter: params => {
              return `${params}%`
            }
          }
        }],
        series: [
          {
            z: 1,
            name: '上部1',
            type: 'pictorialBar',
            symbolPosition: 'end',
            data: dataArr.vaccination,
            symbol: 'diamond',
            symbolOffset: ['-50%','-50%'],
            symbolSize: [29,19],
            itemStyle: {
              borderColor: '#2fffa4',
              color: '#2fffa4'
            },
          },{
            z: 1,
            type: 'bar',
            name: '中餐馆',
            barWidth: 30,
            barGap: '-50%',
            data: dataArr.vaccination,
            itemStyle: {
              color: {
                type: 'linear',
                x: 0,x2: 1,y: 0,y2: 0,
                colorStops: [
                  { offset: 0,color: 'rgba(29, 245, 160, .7)' },
                  { offset: 0.5,color: 'rgba(29, 245, 160, .7)' },
                  { offset: 0.5,color: 'rgba(29, 245, 160, .3)' },
                  { offset: 1,color: 'rgba(29, 245, 160, .3)' }
                ]
              }
            },
          },{
            z: 2,
            name: '上部1',
            type: 'pictorialBar',
            symbolPosition: 'end',
            data: dataArr.unvaccinated,
            symbol: 'diamond',
            symbolOffset: [0,'-50%'],
            symbolSize: [29,19],
            itemStyle: {
              borderColor: '#32ffee',
              color: '#32ffee'
            },
          },{
            z: 2,
            type: 'bar',
            name: '热门小馆',
            barWidth: 30,
            data: dataArr.unvaccinated,
            itemStyle: {
              color: {
                type: 'linear',
                x: 0,x2: 1,y: 0,y2: 0,
                colorStops: [
                  { offset: 0,color: 'rgba(50, 255, 238, .7)' },
                  { offset: 0.5,color: 'rgba(50, 255, 238, .7)' },
                  { offset: 0.5,color: 'rgba(50, 255, 238, .3)' },
                  { offset: 1,color: 'rgba(50, 255, 238, .3)' }
                ]
              }
            },
          },{
            z: 3,
            name: '上部1',
            type: 'pictorialBar',
            symbolPosition: 'end',
            data: dataArr.unvaccinatedTwo,
            symbol: 'diamond',
            symbolOffset: ['50%','-50%'],
            symbolSize: [29,19],
            itemStyle: {
              borderColor: '#ffd11a',
              color: '#ffd11a'
            },
          },{
            z: 3,
            type: 'bar',
            name: '高档酒店',
            barWidth: 30,
            data: dataArr.unvaccinatedTwo,
            itemStyle: {
              color: {
                type: 'linear',
                x: 0,x2: 1,y: 0,y2: 0,
                colorStops: [
                  { offset: 0,color: 'rgba(255, 209, 26, .7)' },
                  { offset: 0.5,color: 'rgba(255, 209, 26, .7)' },
                  { offset: 0.5,color: 'rgba(255, 209, 26, .3)' },
                  { offset: 1,color: 'rgba(255, 209, 26, .3)' }
                ]
              }
            },
          },{
            z: 9,
            yAxisIndex: 1,
            name: '游客好评率',type: 'line',
            symbol: `path://M9.312,4.594 C12.074,4.594 14.313,6.832 14.313,9.594 C14.313,12.355 12.074,14.594 9.312,14.594 C6.551,14.594 4.312,12.355 4.312,9.594 C4.312,6.832 6.551,4.594 9.312,4.594 Z`,
            symbolSize: [10,10],
            color: {
              type: 'linear',x: 1,y: 0,x2: 0,y2: 0,
              // 0% 处的颜色                           // 100% 处的颜色
              colorStops: [{ offset: 0,color: '#32ffee' },{ offset: 1,color: '#8afff5' }],
              global: false // 缺省为 false
            },
            lineStyle: {
              color: {
                type: 'linear',x: 1,y: 0,x2: 0,y2: 0,
                // 0% 处的颜色                           // 100% 处的颜色
                colorStops: [{ offset: 0,color: '#32ffee' },{ offset: 1,color: '#8afff5' }],
                global: false // 缺省为 false
              }
            },
            // 修改的是线下区域的颜色
            areaStyle: {
              color: new echarts.graphic.LinearGradient(
                // 右/下/左/上
                0,0,0,1,[
                { offset: 0,color: 'rgba(50, 255, 238, .1)' },
                { offset: 1,color: 'transparent' }
              ])
            },
            label: {
              show: true,
              position: 'insideBottomLeft',
              formatter: params => {
                return `${params.value}%`
              },
              textStyle: { fontSize: 16,color: '#32ffee' }
            },
            data: dataArr.rateDataOne
          },{
            z: 9,
            yAxisIndex: 1,
            name: '游客复游率',type: 'line',
            symbol: `path://M9.312,4.594 C12.074,4.594 14.313,6.832 14.313,9.594 C14.313,12.355 12.074,14.594 9.312,14.594 C6.551,14.594 4.312,12.355 4.312,9.594 C4.312,6.832 6.551,4.594 9.312,4.594 Z`,
            symbolSize: [10,10],
            color: {
              type: 'linear',x: 1,y: 0,x2: 0,y2: 0,
              // 0% 处的颜色                           // 100% 处的颜色
              colorStops: [{ offset: 0,color: '#ffd11a' },{ offset: 1,color: '#fff5cc' }],
              global: false // 缺省为 false
            },
            lineStyle: {
              color: {
                type: 'linear',x: 1,y: 0,x2: 0,y2: 0,
                // 0% 处的颜色                           // 100% 处的颜色
                colorStops: [{ offset: 0,color: '#ffd11a' },{ offset: 1,color: '#fff5cc' }],
                global: false // 缺省为 false
              }
            },
            // 修改的是线下区域的颜色
            areaStyle: {
              color: new echarts.graphic.LinearGradient(
                // 右/下/左/上
                0,0,0,1,[
                { offset: 0,color: 'rgba(255, 209, 26, .2)' },
                { offset: 1,color: 'transparent' }
              ])
            },
            label: {
              show: true,
              position: 'insideBottomRight',
              formatter: params => {
                return `${params.value}%`
              },
              textStyle: { fontSize: 16,color: '#ffd11a' }
            },
            data: dataArr.rateDataTwo
          }],

        grid: { top: '18%',left: '10%',right: '6%',bottom: '25%' },




        backgroundColor: 'rgba(34, 52, 87, 0.8)'

      },
      //仪表盘done
      option4: {
        title: {
          x: 'center',
          bottom: 50,
          text: "天气情况",
          textStyle: {
            fontWeight: 'normal',
            fontSize: 20,
            color: "#fff"
          },
        },
        tooltip: {
          show: false,
        },
        series:
          [
            {
              type: 'gauge',
              name: '中，外',
              center: ['50%','50%'], // 默认全局居中  
              radius: '50%',
              splitNumber: 10, //刻度数量
              min: 0,
              max: 100,
              startAngle: 220,
              endAngle: -40,
              clockwise: true,
              axisLine: {
                show: true,
                lineStyle: {
                  width: 2,
                  shadowBlur: 0,
                  color: [
                    [1,'#468EFD']
                  ]
                }
              },
              axisTick: {
                show: true,
                lineStyle: {
                  color: '#468EFD',
                  width: 1
                },
                length: -15,
                // splitNumber: 10
              },
              splitLine: {
                show: true,
                length: -20,
                lineStyle: {
                  color: '#468EFD',
                }
              },
              axisLabel: {
                distance: -20,
                textStyle: {
                  color: "#468EFD",
                  fontSize: 20,
                  fontWeight: "bold"
                }
              },
              pointer: { //仪表盘指针
                show: 0
              },
              detail: {
                show: false
              }
            },
            {
              name: weatherdata[0].name,
              type: 'gauge',
              startAngle: 220,
              endAngle: -40,
              center: ['50%','50%'], // 默认全局居中  
              radius: '45%',
              min: 0,
              max: 100,
              splitNumber: 2,
              axisLine: { // 坐标轴线  
                lineStyle: {
                  color: [
                    [0.6,'#E75B64'],
                    [1,"#55CD96"]
                  ], // 属性lineStyle控制线条样式  
                  width: 3
                }
              },
              axisLabel: { // 坐标轴小标记 
                show: false
              },
              splitLine: { // 分隔线
                show: false,
              },
              pointer: { // 分隔线 指针 
                show: true
              },
              detail: {
                show: true,
                textStyle: {
                  fontSize: 20,
                  color: '#ffffff'
                },
                formatter: function(value) {
                  return value+'{a|°C}';
                },
                rich: {
                  a: {
                    fontSize: 20
                  }
                }
              },
              title: {
                show: true,
                offsetCenter: ["0","80%"],
                color: "#C1ED84",
                // fontWeight: "bolder",
                fontSize: 20
              },
              data: [weatherdata[0]]
            },
            {
              type: 'gauge',
              name: '左，外',
              center: ['20%','55%'], // 默认全局居中  
              radius: '35%',
              splitNumber: 5, //刻度数量
              min: 0,
              max: 100,
              endAngle: 45,
              clockwise: true,
              axisLine: {
                show: true,
                lineStyle: {
                  width: 2,
                  shadowBlur: 0,
                  color: [
                    [1,'#468EFD']
                  ]
                }
              },
              axisTick: {
                show: true,
                lineStyle: {
                  color: '#468EFD',
                  width: 1
                },
                length: -15,
                splitNumber: 10
              },
              splitLine: {
                show: true,
                length: -20,
                lineStyle: {
                  color: '#468EFD',
                }
              },
              axisLabel: {
                distance: -20,
                textStyle: {
                  color: "#468EFD",
                  fontSize: "15",
                  fontWeight: "bold"
                }
              },
              pointer: { //仪表盘指针
                show: 0
              },
              detail: {
                show: false
              }
            },
            {
              type: 'gauge',
              name: weatherdata[1].name,
              center: ['20%','55%'], // 默认全局居中  
              radius: '30%',
              min: 0,
              max: 100,
              endAngle: 45,
              splitNumber: 2,
              axisLine: { // 坐标轴线 
                lineStyle: {
                  color: [
                    [0.6,'#E75B64'],
                    [1,"#55CD96"]
                  ], // 属性lineStyle控制线条样式  
                  width: 3
                }
              },
              axisLabel: { // 坐标轴小标记 
                show: false
              },
              splitLine: { // 分隔线
                show: false,
              },
              pointer: { // 分隔线 指针 
                show: true
              },
              detail: {
                show: true,
                offsetCenter: [0,'50%'],
                textStyle: {
                  fontSize: 20,
                  color: '#ffffff'
                },
                formatter: function(value) {
                  return value+'{a|}';
                },
                rich: {
                  a: {
                    fontSize: 20
                  }
                }
              },
              title: {
                show: true,
                offsetCenter: ["0","80%"],
                color: "#C1ED84",
                // fontWeight: "bolder",
                fontSize: 20
              },
              data: [weatherdata[1]]
            },
            {
              type: 'gauge',
              name: '右，外',
              center: ['80%','55%'], // 默认全局居中  
              radius: '35%',
              splitNumber: 5, //刻度数量
              min: 0,
              max: 100,
              startAngle: 140,
              endAngle: -45,
              clockwise: true,
              axisLine: {
                show: true,
                lineStyle: {
                  width: 2,
                  shadowBlur: 0,
                  color: [
                    [1,'#468EFD']
                  ]
                }
              },
              axisTick: {
                show: true,
                lineStyle: {
                  color: '#468EFD',
                  width: 1
                },
                length: -15,
                splitNumber: 10
              },
              splitLine: {
                show: true,
                length: -20,
                lineStyle: {
                  color: '#468EFD',
                }
              },
              axisLabel: {
                distance: -20,
                textStyle: {
                  color: "#468EFD",
                  fontSize: "15",
                  fontWeight: "bold"
                }
              },
              pointer: { //仪表盘指针
                show: 0
              },
              detail: {
                show: false
              }
            },
            {
              type: 'gauge',
              name: weatherdata[2].name,
              center: ['80%','55%'], // 默认全局居中  
              radius: '30%',
              min: 0,
              max: 100,
              startAngle: 140,
              endAngle: -45,
              splitNumber: 2,
              axisLine: { // 坐标轴线 
                lineStyle: {
                  color: [
                    [0.6,'#E75B64'],
                    [1,"#55CD96"]
                  ], // 属性lineStyle控制线条样式  
                  width: 3
                }
              },
              axisLabel: { // 坐标轴小标记 
                show: false
              },
              splitLine: { // 分隔线
                show: false,
              },
              pointer: { // 分隔线 指针 
                show: true
              },
              detail: {
                show: true,
                offsetCenter: [0,'50%'],
                textStyle: {
                  fontSize: 20,
                  color: '#ffffff'
                },
                formatter: function(value) {
                  return value+'{a|%RH}';
                },
                rich: {
                  a: {
                    fontSize: 20
                  }
                }
              },
              title: {
                show: true,
                offsetCenter: ["0","80%"],
                color: "#C1ED84",
                // fontWeight: "bolder",
                fontSize: 20
              },
              data: [weatherdata[2]]
            }
          ]
      },
      option7: {
        legend: {
          orient: 'vertical',
          top: "center",
          right: "5%",
          data: ['中餐厅','快餐店','咖啡店','清真餐厅','火锅店','茶馆','其他'],
          textStyle: {
            color: "#fff",
            fontSize: 16
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        series: [
          {
            name: '半径模式',
            type: 'pie',
            radius: ['30%','80%'],
            center: ['40%','50%'],
            roseType: 'radius',
            label: {
              show: true,
              normal: {
                position: 'outside',
                fontSize: 16
              }
            },
            labelLine: {
              length: 1,
              length2: 20,
              smooth: true
            },
            data: [{
              value: 1,
              name: '中餐厅',
              itemStyle: {
                color: "rgba(50,123,250,0.7)",
                borderColor: "rgba(50,123,250,1)",
                borderWidth: 3
              }
            },
            {
              value: 2,
              name: '快餐店',
              itemStyle: {
                color: "rgba(244,201,7,0.7)",
                borderColor: "rgba(244,201,7,1)",
                borderWidth: 3
              }
            },
            {
              value: 3,
              name: '咖啡店',
              itemStyle: {
                color: "rgba(23,216,161,0.7)",
                borderColor: "rgba(23,216,161,1)",
                borderWidth: 3
              }
            },
            {
              value: 4,
              name: '清真餐厅',
              itemStyle: {
                color: "rgba(122,60,235,0.7)",
                borderColor: "rgba(122,60,235,1)",
                borderWidth: 3
              }
            },
            {
              value: 5,
              name: '火锅店',
              itemStyle: {
                color: "rgba(15,197,243,0.7)",
                borderColor: "rgba(15,197,243,1)",
                borderWidth: 3
              }
            },
            {
              value: 5,
              name: '茶馆',
              itemStyle: {
                color: "rgba(255, 105 ,180,0.7)",
                borderColor: "rgba(255 ,105 ,180,1)",
                borderWidth: 3
              }
            },
            {
              value: 5,
              name: '其他',
              itemStyle: {
                color: "rgba(0 ,139 ,139,0.7)",
                borderColor: "rgba(0, 139 ,139,1)",
                borderWidth: 3
              }
            }
            ]
          }]
      },
      option8: {
        "normal": {
          "top": 200,
          "left": 300,
          "width": 500,
          "height": 400,
          "zIndex": 6,
          "backgroundColor": ""
        },
        "color": ["rgba(245, 166, 35, 1)","rgba(19, 173, 255, 1)"],
        "tooltip": {
          "show": true,
          "trigger": "item"
        },
        "legend": {
          "show": true,
          "icon": "circle",
          "left": "43%",
          "top": "90%",
          "orient": "horizontal",
          "textStyle": {
            "fontSize": 16,
            "color": "#fff"
          },
          "data": ["2020","2021"]
        },
        "radar": {
          "center": ["50%","45%"],
          "radius": "70%",
          "startAngle": 90,
          "splitNumber": 4,
          "shape": "polygon",
          name: {
            textStyle: {
              color: '#fff',
              fontSize: 18,
              padding: [-10,-12]
            }
          },
          splitArea: {
            show: true,
            areaStyle: {
              color: '#0d6dba',
              opacity: 0.1
            }
          },
          "axisLabel": {
            "show": false,
            "fontSize": 18,
            "color": "#fff",
            "fontWeight": "normal"
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#4f8bbe',
              opacity: 1
            }
          },
          splitLine: {

            lineStyle: {
              color: '#4f8bbe',
              opacity: 0.5
            }
          },
          "indicator": [{
            "name": "百胜",
            "max": 88
          },{
            "name": "金拱门",
            "max": 88
          },{
            "name": "海底捞",
            "max": 88
          },{
            "name": "西贝",
            "max": 88
          },{
            "name": "千喜鹤",
            "max": 88
          },{
            "name": "顶巧",
            "max": 88
          },{
            "name": "佳客来",
            "max": 88
          }]
        },
        "series": [
          {
            "name": "2020",
            "type": "radar",
            "symbol": "circle",
            "symbolSize": 10,
            "areaStyle": {
              "normal": {
                "color": "rgba(245, 166, 35, 0.4)"
              }
            },
            itemStyle: {
              color: 'rgba(245, 166, 35, 1)',
              borderColor: 'rgba(245, 166, 35, 0.3)',
              borderWidth: 10,
            },
            "lineStyle": {
              "normal": {
                "type": "dashed",

                "color": "rgba(245, 166, 35, 1)",
                "width": 2
              }
            },
            "data": [
              [80,50,55,80,50,80,48]
            ]
          },{
            "name": "2021",
            "type": "radar",
            "symbol": "circle",
            "symbolSize": 10,
            "itemStyle": {
              "normal": {
                color: 'rgba(19, 173, 255, 1)',
                "borderColor": "rgba(19, 173, 255, 0.4)",
                "borderWidth": 10
              }
            },
            "areaStyle": {
              "normal": {
                "color": "rgba(19, 173, 255, 0.5)"
              }
            },
            "lineStyle": {
              "normal": {
                "color": "rgba(19, 173, 255, 1)",
                "width": 2,
                "type": "dashed"
              }
            },
            "data": [
              [60,60,65,60,70,40,80]
            ]
          }],

      },

    }
  },


  props: {
    // 标题
    title: {
      type: String,
      default: '提示'
    },
    // 弹框控制
    visible: {
      type: Boolean,
      default: false
    },
    // 文本
    text: {
      type: String,
      default: '文本信息'
    },
    // 接收的数据
    // data: {
    //     type: Object,
    //     default: () => {}
    // },
    // 是否居中
    center: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    dialogVisible() {
      this.$emit('update:visible',false);
    },
    opens() {
      this.$nextTick(() => {
        this.pie1()
      })
    },
    pie1() {
      mychart1=echarts.init(this.$refs.chart1)
      mychart1.setOption(this.option3)
      mychart2=echarts.init(this.$refs.chart2)
      mychart2.setOption(this.option7)
      mychart3=echarts.init(this.$refs.chart3)
      mychart3.setOption(this.option8)
      mychart4=echarts.init(this.$refs.chart4)
      mychart4.setOption(this.option4)
    },
    button() {
      mychart1.clear()
      let pillarRandom1=[]; let pillarRandom2=[]; let pillarRandom3=[]; let pillarRandom4=[]; let pillarRandom5=[]; dataArr.vaccination=[]; dataArr.unvaccinated=[]; dataArr.unvaccinatedTwo=[]; dataArr.rateDataOne=[]; dataArr.rateDataTwo=[];
      for(let i=0;i<7;i++) {
        pillarRandom1.push((100*Math.floor(Math.random()*8)+5)); pillarRandom2.push((100*Math.floor(Math.random()*6)+4)); pillarRandom3.push((100*Math.floor(Math.random()*3)+2)); pillarRandom4.push(Math.floor(Math.random()*12)+85); pillarRandom5.push(Math.floor(Math.random()*18)+40);
      }
      this.option3.series[0].data=pillarRandom1; this.option3.series[1].data=pillarRandom1; this.option3.series[2].data=pillarRandom2; this.option3.series[3].data=pillarRandom2; this.option3.series[4].data=pillarRandom3; this.option3.series[5].data=pillarRandom3; this.option3.series[6].data=pillarRandom4; this.option3.series[7].data=pillarRandom5;
      mychart1.setOption(this.option3)
      mychart2.clear()
      this.option7.series[0].data[0].value=((Math.random()*9)+5); this.option7.series[0].data[1].value=((Math.random()*5)+3); this.option7.series[0].data[2].value=((Math.random()*3)+3); this.option7.series[0].data[3].value=((Math.random()*2)+2); this.option7.series[0].data[4].value=((Math.random()*1)+5); this.option7.series[0].data[5].value=((Math.random()*7)+5); this.option7.series[0].data[6].value=((Math.random()*9)+5);
      mychart2.setOption(this.option7)
      mychart3.clear()
      let randomArr1=[]; let randomArr2=[]; this.option8.series[0].data[0]=[]; this.option8.series[1].data[0]=[]
      for(let i=0;i<7;i++) {
        randomArr1.push(Math.floor(Math.random()*25)+45);
        randomArr2.push(Math.floor(Math.random()*28)+50);
      }
      this.option8.series[0].data[0]=randomArr1; this.option8.series[1].data[0]=randomArr2
      mychart3.setOption(this.option8)
      mychart4.clear()
      let weadata1=[{ value: Math.floor((Math.random()*9)+25),name: '温度' }]
      let weadata2=[{ value: Math.floor((Math.random()*9)+28),name: '污染值' }]
      let weadata3=[{ value: Math.floor(10*((Math.random()*5)+1)),name: '湿度' }]
      this.option4.series[1].data=weadata1
      this.option4.series[3].data=weadata2
      this.option4.series[5].data=weadata3
      mychart4.setOption(this.option4)

    },
    //级联选择器
    handleChange(value) {
    },



  }
};
</script>

<style lang="scss">
.customerDialogClass {
  width: 900px;
  height: 800px;
}
::v-deep .el-dialog {
  background-color: rgba(34, 52, 87, 0.8);
}
</style>


